<template>
  <div class="dashboard-editor-container">
    <!-- <github-corner class="github-corner"  margin-top:12px;  /> -->

    <el-row style="width: 86.3%; top: 6px; z-index: 999; position: fixed">
      <el-col :span="5" class="card-box">
        <!-- <i class="el-icon-s-data" /><span style="font-weight:600;color:#666;margin-right: 450px;margin-left: 5px;">
          销售总览
        </span> -->

        <!-- <el-cascader
          class="region"
          v-model="queryParams.salesGrade"
          placeholder="选择店铺分组"
          :options="cascadeList"
          :props="{ checkStrictly: true }"
          @change="handleChange"
          style="width: 300px; height: 30px"
        >
        </el-cascader> -->
      </el-col>
      <el-col :span="12" style="height: 30px">
        <nav id="navbar">
          <!-- <ul>
            <li :class="{ active: isActiveSection(1) }">
              <a href="#section1" @click="scrollToSection(1)">销售总览</a>
            </li>
            <li :class="{ active: isActiveSection(2) }">
              <a href="#section2" @click="scrollToSection(2)">渠道排行</a>
            </li>
            <li :class="{ active: isActiveSection(3) }">
              <a href="#section3" @click="scrollToSection(3)">店铺排行</a>
            </li>
            <li :class="{ active: isActiveSection(4) }">
              <a href="#section4" @click="scrollToSection(4)">库存分析</a>
            </li>
            <li :class="{ active: isActiveSection(5) }">
              <a href="#section5" @click="scrollToSection(5)">地区排行</a>
            </li>
          </ul> -->
        </nav>
      </el-col>
      <el-col :span="1"><span></span></el-col>
      <el-col :span="6">
        <el-date-picker
          type="month"
          @change="changeTime"
          v-model="value2"
          placeholder="选择月"
        >
        </el-date-picker>
        <!-- <date
          v-model="valueTime"
          :type.sync="groupType"
          @handleChangeTime="handleChangeTime($event)"
        ></date> -->
        <el-button type="primary" size="mini" @click="handleUpdate"
          >更新按钮</el-button
        >
      </el-col>
    </el-row>

    <section id="section1" style="margin-bottom: 16px">
      <el-card>
        <div
          slot="header"
          style="display: flex; justify-content: space-between"
        >
          <span><i class="el-icon-collection"></i>财务总览</span>
          <el-radio-group
            v-model="queryParams.decimalsNumber"
            size="mini"
            @change="changeTime"
          >
            <el-radio-button
              v-for="(item, index) in typeArr"
              :key="index"
              :label="item.value"
              >{{ item.label }}</el-radio-button
            >
          </el-radio-group>
        </div>
        <panel-group-i
          :biNumberOfItem="valueData"
          @handleSetChartData="handleSetChartData"
        />
      </el-card>
    </section>

    <section id="section1" style="margin-bottom: 16px">
      <el-card>
        <div
          slot="header"
          style="display: flex; justify-content: space-between"
        >
          <span><i class="el-icon-collection"></i> 财务分析</span>
          <div>
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              @click="openExport = true"
              >导出</el-button
            >
            <el-select
              v-model="queryParams.sku"
              placeholder="sku"
              filterable
              clearable
              allow-create
              remote
              :remote-method="getselectSkuLikeList"
              @change="getList"
            >
              <el-option
                v-for="(dict, index) in selectSkuLikeList"
                :key="index"
                :label="dict"
                :value="dict"
              />
            </el-select>
          </div>
        </div>
        <!-- <div ref="tableDom"> :maxHeight="BiKeywordDwdList.length ? tableHeight : 'auto'"-->
        <el-table
          v-loading="loading"
          :data="BiKeywordDwdList"
          @cell-click="tableEdit"
          @sort-change="handleSortChange"
          :height="itemHeight"
        >
          <el-table-column label="sku" align="center" prop="sku" width="150" />
          <el-table-column label="一级类目" align="center" prop="firstLevel" />
          <el-table-column label="二级类目" align="center" prop="secondLevel" />
          <el-table-column
            label="三级类目"
            align="center"
            prop="threeLevel"
            width="120"
          />
          <el-table-column label="尺码" align="center" prop="proSize" />
          <el-table-column label="主图" align="center" prop="mainPic">
            <template slot-scope="scope">
              <image-preview
                :src="scope.row.mainPic"
                :width="40"
                :height="40"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="月份"
            align="center"
            prop="month"
            width="150"
          />
          <el-table-column
            sortable
            width="110"
            label="本期成本"
            align="center"
            prop="currentPeriodCost"
          />
          <el-table-column
            sortable
            width="110"
            label="期初数量"
            align="center"
            prop="beginningQuantity"
          />
          <el-table-column
            sortable
            width="110"
            label="期末数量"
            align="center"
            prop="endingQuantity"
          />
          <el-table-column
            sortable
            width="110"
            label="期初金额"
            align="center"
            prop="beginningAmount"
          />
          <el-table-column
            sortable
            width="110"
            label="期末金额"
            align="center"
            prop="endingAmount"
          />

          <el-table-column
            sortable
            width="110"
            label="本期金额"
            align="center"
            prop="currentPeriodAmount"
          />
          <el-table-column
            sortable
            width="130"
            label="销售出库金额"
            align="center"
            prop="salesOutAmount"
          />
          <el-table-column
            sortable
            width="130"
            label="销售退货金额"
            align="center"
            prop="salesReturnAmount"
          />
          <el-table-column
            sortable
            width="140"
            label="其他出入库金额"
            align="center"
            prop="otherTransactionAmount"
          />
          <el-table-column
            sortable
            width="110"
            label="盘点金额"
            align="center"
            prop="inventoryCountAmount"
          />
          <el-table-column
            sortable
            width="110"
            label="采购退货"
            align="center"
            prop="purchaseReturnQuantity"
          />
          <el-table-column
            sortable
            width="110"
            label="采购进仓"
            align="center"
            prop="purchaseInWarehouseQuantity"
          />
          <el-table-column
            sortable
            width="110"
            label="其它进仓"
            align="center"
            prop="otherInWarehouseQuantity"
          />
          <el-table-column
            sortable
            width="110"
            label="其它退货"
            align="center"
            prop="otherReturnQuantity"
          />
          <el-table-column
            sortable
            width="110"
            label="销售出仓"
            align="center"
            prop="salesOutWarehouseQuantity"
          />
          <el-table-column
            sortable
            width="110"
            label="盘点"
            align="center"
            prop="inventoryCount"
          />
          <el-table-column
            sortable
            width="110"
            label="加工出仓"
            align="center"
            prop="processingOutWarehouseQuantity"
          />
          <el-table-column
            sortable
            width="110"
            label="调拨出"
            align="center"
            prop="transferOutQuantity"
          />
          <el-table-column
            sortable
            width="110"
            label="销售退货"
            align="center"
            prop="salesReturnQuantity"
          />
          <el-table-column
            sortable
            width="110"
            label="调拨入"
            align="center"
            prop="transferInQuantity"
          />
          <el-table-column
            sortable
            width="110"
            label="其他出库"
            align="center"
            prop="otherOutWarehouseAmount"
          />
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="pageList"
        />
      </el-card>
    </section>

    <section style="margin-bottom: 16px">
      <el-card>
        <div
          slot="header"
          style="display: flex; justify-content: space-between"
        >
          <span><i class="el-icon-collection"></i> 财务分析明细</span>
        </div>
        <panel-group
          @handleSetLineChartData="handleSetLineChartData"
          :itemData="itemData"
        />
      </el-card>
    </section>

    <section style="margin-bottom: 16px">
      <el-card>
        <div
          slot="header"
          style="display: flex; justify-content: space-between"
        >
          <span><i class="el-icon-collection"></i> 财务分析趋势</span>
        </div>
        <chartData :chart-data="echartDataI" />
      </el-card>
    </section>

    <section id="section" style="padding: 32px; display: none">
      <el-row :gutter="20" class="data_section" style="margin-bottom: 30px">
        <el-row :gutter="20" class="data_section">
          <el-col :span="24">
            <!-- <div class="addBtn" @click="addLibraryIdList">
            <div class="el-icon-plus">新增条件</div>
          </div> -->
            <el-col :span="21">
              <el-button type="primary" size="mini" @click="addLibraryIdList"
                >新增</el-button
              >
              <el-button
                type="primary"
                size="mini"
                @click="selectKeyWordStatisticsEchartsII"
                >查询</el-button
              >
            </el-col>
            <el-col :span="3">
              <!-- <span style="font-weight: 600">{{ itemType }}</span> -->
              <el-select
                v-model="queryParams.property"
                placeholder="店铺名称属性"
                filterable
                @change="selectKeyWordStatisticsEchartsII"
              >
                <el-option
                  v-for="item in itemType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-col>
          </el-col>
        </el-row>
        <el-form ref="form" :model="formData" label-position="top">
          <div>
            <!-- <div class="module-table-name mb15">
          <span>基础条件选择</span>
        </div> 
       
      -->
            <div class="flex_row" style="display: flex; flex-direction: row">
              <div
                v-for="(item, index) in formData.libraryIdList"
                :key="index"
                class="fx_5"
              >
                <el-form-item style="display: flex; flex-direction: row">
                  <el-select
                    v-model="item.id"
                    placeholder="店铺名称展示"
                    filterable
                    @change="keywordListlength"
                    default-first-option
                  >
                    <!--
                       allow-create
                       remote
                    :remote-method="getselectKeyWordList"
                         width="100"
                        :popper-append-to-body="false"
                         remote
                      :remote-method="getselectKeyWordList" -->
                    <!-- <div>
                        
                      </div> -->
                    <!--allow-create
                      default-first-option
                         @blur="blurInput($event)" -->
                    <!-- <el-input
                        v-model="item.id"
                        placeholder="请输入"
                      ></el-input> -->
                    <el-option
                      v-for="libraryItem in ShopNameList"
                      :key="libraryItem"
                      :label="libraryItem"
                      :value="libraryItem"
                    >
                    </el-option>
                  </el-select>

                  <span
                    v-if="formData.libraryIdList.length > 1"
                    @click="delRow(item, index)"
                  >
                    <el-button
                      type="danger"
                      size="mini"
                      class="el-icon-delete"
                    ></el-button>
                  </span>
                  <span v-if="index !== formData.libraryIdList.length - 1">
                    VS
                  </span>
                </el-form-item>
              </div>
            </div>
          </div>
        </el-form>
        <!-- <el-row> -->
        <!-- {{ pjtUrl + itemData.picUrl }}-->
        <!-- {{ itemData.picFullUrl }} -->
        <!-- style="width: 150px" -->
        <!-- {{ productNo }} -->
        <!-- <div style="">
            <span>
              店铺名称：<el-select
                v-model="productNo"
                clearable
                filterable
                remote
                :remote-method="getDatas"
                placeholder="请输入"
                @change="testAdd"
              >
                <el-option
                  v-for="item in options"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </span>
          </div> -->

        <!-- <panel-group-i
          @handleSetLineSkuData="handleSetLineSkuData"
          :itemData="itemData"
        /> -->
        <!-- </el-col> -->
      </el-row>
      <!-- <el-row style="background: #fff; padding: 32px 32px">
        <chartData :chart-data="echartDataI" />
      </el-row> -->
      <el-row
        style="background: #fff; padding: 16px 16px 0; margin-bottom: 32px"
      >
        <!-- <chartDataI :echartDataSku="echartDataSku" /> -->
        <!-- <Echart
          :chartData="echartsData.order"
          style="height: 380px; width: 100%" ,width:1500px
        ></Echart> -->
        <!-- <el-card style="height: 280px"> -->
        <div
          style="margin-left: 2px; margin-right: 2px; height: 460px"
          ref="echarts"
        ></div>
        <!-- <Echart :chartData="echartsData.order" style="height: 280px"></Echart> -->
        <!-- </el-card> -->
      </el-row>
    </section>

    <!-- <section id="section2">
      <el-row
        style="background: #fff; padding: 0px 16px 0; margin-bottom: 32px"
      >
        
        <h4
          style="
            font-weight: 500;
            color: #666;
            margin-left: 5px;
            margin-top: 25px;
          "
        >
          <span
            ><i
              class="el-icon-s-data"
              style="margin-right: 5px"
            />趋势分析</span
          >
          <span style="margin-left: 700px">款号：{{ productNo }}</span>
        </h4>

        <chartData :chart-data="echartDataI" />
      </el-row>
    </section> -->

    <!-- <section id="section2">
      <el-row :gutter="10" style="background: #fff; padding: 16px 16px">
        <el-col :span="12">         
          <el-card>
            <div
              slot="header"
              style="display: flex; justify-content: space-between"
            >
              <span><i class="el-icon-collection"></i> skc分析</span>
              
            </div>
            
            <el-table
              :maxHeight="skcitemData.length ? tableHeight : 'auto'"
              :data="skcitemData"
              :height="pageHeight"
              highlight-current-row
              style="width: 100%"
              
            >
              
              <el-table-column
                width="110"
                label="spu"
                align="center"
                prop="spu"
              ></el-table-column>
              <el-table-column
                width="125"
                label="skc"
                align="center"
                prop="skc"
              ></el-table-column>
              <el-table-column
                width="90"
                label="颜色"
                align="center"
                prop="colorProperty"
              />
              <el-table-column
                width="90"
                label="库存"
                align="center"
                prop="endingInventory"
              />
              <el-table-column
                width="90"
                label="采购在途"
                align="center"
                prop="salesGrossProfit"
              />
              <el-table-column
                width="90"
                label="销量"
                align="center"
                prop="netSalesNumber"
              />
              <el-table-column
                width="90"
                label="净销售额"
                align="center"
                prop="netSalesAmount"
              ></el-table-column>
              <el-table-column
                width="90"
                label="可售天数"
                align="center"
                prop="saleDays"
              ></el-table-column>
            </el-table>
            
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <div
              slot="header"
              style="display: flex; justify-content: space-between"
            >
              <span><i class="el-icon-pie-chart"></i> 颜色库销比</span>
              <el-button type="primary" @click="selectAll"
                >查看完整数据</el-button
              >
            </div>
            <div
              class="el-table el-table--enable-row-hover el-table--medium chart-container"
            >
              <MixChart
                :id="'MixChart'"
                :chartData="echartData"
                @SetLineChartData="SetLineChartData"
                height="410px"
                width="830px"
              />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </section>

    <section id="section2">
      
      <el-row :gutter="10" style="background: #fff; padding: 20px 16px 0">
        <el-col :span="12">
          <el-card style="height: calc(100vh - 500px)">
            <div slot="header">
              <span><i class="el-icon-collection"></i> 颜色分析</span>
            </div>
            <el-table
              :data="skuitemData"
              :height="pageHeight"
              highlight-current-row
              style="width: 100%"
            >
              <el-table-column
                width="110"
                label="spu"
                align="center"
                prop="spu"
              ></el-table-column>
              
              <el-table-column
                width="110"
                label="颜色"
                align="center"
                prop="colorProperty"
              />
              <el-table-column
                width="110"
                label="尺码 "
                align="center"
                prop="proSize"
              ></el-table-column>
              <el-table-column
                width="90"
                label="库存"
                align="center"
                prop="endingInventory"
              />
              <el-table-column
                width="90"
                label="采购在途"
                align="center"
                prop="salesGrossProfit"
              />
              <el-table-column
                width="90"
                label="销量"
                align="center"
                prop="netSalesNumber"
              />
              <el-table-column
                width="90"
                label="净销售额"
                align="center"
                prop="netSalesAmount"
              ></el-table-column>
              <el-table-column
                width="90"
                label="可售天数"
                align="center"
                prop="saleDays"
              ></el-table-column>
            </el-table>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <div slot="header">
              <span><i class="el-icon-pie-chart"></i> 尺码库销比</span>
            </div>
            <div
              class="el-table el-table--enable-row-hover el-table--medium chart-container"
            >
              <MinChart
                :id="'MinChart'"
                :minchartData="echartDataMin"
                height="410px"
                width="830px"
              />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </section> -->
    <!-- 添加或修改产品一级信息对话框  @close="handleClose"-->
    <el-dialog
      :visible.sync="open"
      width="95%"
      height="100%"
      append-to-body
      v-if="open"
      @close="handleClose"
    >
      <div class="el-dialog-div">
        <MixChart
          :id="'MixAllChart'"
          :chartData="echartData"
          @SetLineChartData="SetLineChartData"
          :height="'50%'"
          :width="'100%'"
        />
        <MinChart
          :id="'MinAllChart'"
          :minchartData="echartDataMin"
          :height="'50%'"
          :width="'100%'"
        />
      </div>
    </el-dialog>
    <!-- <tendency :sevenDate='sevenDate' :sevenDay='sevenDay'></tendency> -->
    <!-- 添加或修改月度进销存对话框 -->
    <el-dialog
      title="导出"
      :visible.sync="openExport"
      v-if="openExport"
      width="350px"
      append-to-body
    >
      <div style="margin-bottom: 50px">提醒:导出图片可能需要几分钟</div>
      <el-button
        type="warning"
        plain
        icon="el-icon-download"
        size="mini"
        @click="handleExportPic"
        >导出图片</el-button
      >
      <el-button
        type="warning"
        plain
        icon="el-icon-download"
        size="mini"
        @click="handleExport"
        >不导出图片</el-button
      >
      <el-button size="mini" @click="openExport = false">取消</el-button>
    </el-dialog>
  </div>
</template>

<script>
import Echart from "./components/ECharts.vue";
import {
  listBiKeywordDwd,
  getBiKeywordDwd,
  delBiKeywordDwd,
  addBiKeywordDwd,
  updateBiKeywordDwd,
  selectByConditionList,
  selectPartWordList,
  selectKeyWordStatistics,
  comparisonStatistics,
  selectKeyWordList,
} from "@/api/keyword/BiKeywordDwd";
import * as echarts from "echarts";
import date from "./day/date.vue";
import day from "./day/day.vue";
import chartDataI from "./components/chartDataI";
import chartData from "./components/chartData";
import timeSearch from "./day/day.vue";
import dayTime from "./day/dayTime.vue";
// import GithubCorner from '@/components/GithubCorner'
import PanelGroup from "./components/PanelGroup";
import PanelGroupI from "./components/PanelGroupI";
// import LineChart from './components/LineChart'
import {
  itemSaleData,
  skcByItemSaleList,
  queryContentByKey,
  selectItemStatistics,
  skuBySkcSaleList,
} from "@/api/sku/sku";
// queryContentByKey,
// selectItemStatistics,
// src\views\example\Charts\MixChart.vue
import MixChart from "@/views/sku/Chart/MixChart.vue";
import MinChart from "@/views/sku/Charts/MinChart.vue";

import { listBrandChannelShop, listAll } from "@/api/chart/brandChannelShop";
import {
  // 数据级别排行
  selectGradeList,
  // 数据总览
  selectProductData,
  // 数据排行
  selectProductMarketingRank,
  // 单品多指标趋势图
  selectProductStatistics,
  // 多商品单指标对比
  comparisonStatisticsPro,
  selectCompetitorShopRank,
  selectCompetitorShopStatistics,
  selectCompeteShopNameAll,
} from "@/api/marketing/BiCompetitorShopDwd";
import {
  listBiPurchaseSaleStock,
  getBiPurchaseSaleStock,
  delBiPurchaseSaleStock,
  addBiPurchaseSaleStock,
  updateBiPurchaseSaleStock,
  secondPurchaseSaleStock,
  selectPurchaseSaleStockAll,
  selectPurchaseSaleStockRank,
  selectMonthlyCostStatistics,
  isCalculateData,
  calculateData,
  selectSkuLike,
} from "@/api/financial/BiPurchaseSaleStock";
import moment from "moment";
export default {
  name: "Admin",
  dicts: [
    "sys_product_view",
    "sys_product_qudao",
    "sys_product_size",
    "sys_product_design",
    "sys_product_scene",
    "sys_product_coder",
    "sys_product_yf",
    "sys_product_cycle",
    "sys_product_pl",
    "sys_product_jijie",
    "sys_product_level",
    "sys_sale_view",
    "sys_product_itemtype",
    "sys_product_secondary",
  ],
  components: {
    Echart,
    // skc
    MixChart,

    // sku
    MinChart,
    // GithubCorner,
    PanelGroup,
    PanelGroupI,
    // LineChart,

    // RaddarChart,
    // PieChart,
    // BarChart,

    chartData,
    chartDataI,
    // TransactionTable,
    // TodoList,
    // BoxCard
    timeSearch,
    date,
    day,
    dayTime,
  },
  data() {
    return {
      typeArr: [
        { value: 2, label: "小数点后两位" },
        { value: 6, label: "小数点后六位" },
      ],
      //判断是否导出图片
      openExport: false,

      selectSkuLikeList: [],
      value2: "",
      valueData: {},

      //多选店铺名称
      formData: {
        libraryIdList: [{ id: "" }],
      },
      libraryOptions: [
        // { value: "1", label: "库位1" },
        // { value: "2", label: "库位2" },
        // { value: "3", label: "库位3" },
        // { value: "4", label: "库位4" },
        // { value: "5", label: "库位5" },
        // { value: "6", label: "库位6" },
      ], // 库存名称列表
      echartsData: {
        order: {
          xData: [],
          series: [],
        },
      },
      //划分词
      PartWordList: [],
      //店铺名称
      BiKeywordDwdList: [],
      //总览数据
      itemData: {},
      productNo: "",
      options: [], // 选项，从后端传递过来
      open: false,
      //skc列表
      skcitemData: [],
      //sku列表
      skuitemData: [],
      echartData: {
        // order: {
        xData: [],
        female: [],
        male: [],
        average: [],
      },
      echartDataMin: {
        // order: {
        xData: [],
        female: [],
        male: [],
        average: [],
      },
      loading: false,
      //面料名称
      mianliao: [],
      //纵向滚动条
      tableHeight: "",
      // 总条数
      total: 0,

      //商品排行
      ItemDateList: [],
      //产品视角
      productView: "item",
      //店铺SaleTop
      shopSaleTopList: [],
      //渠道SaleTop
      channelSaleTopList: [],
      // 统计店铺信息
      commandstats: null,
      //统计渠道信息
      usedmemory: null,
      //锚点
      sections: document.querySelectorAll("section"),
      activeSection: null,
      active: null,
      scrollTimer: null,
      //地区前20
      TopSallist: [],
      tableHeight: window.innerHeight - 175,
      pageHeight: window.innerHeight - 540,
      //BI指标数据
      biNumberItem: [],
      biNumberSku: [],
      //时间控件
      timeObj: {},
      //客单价
      biNumberOfItem: "",

      //时间控件
      valueTime: new Date(new Date().setDate(new Date().getDate() - 1)),
      // valueTime: "",
      groupType: "date",

      highlighted: ["期初数量", "期初金额", "期末数量"], // 初始化时，前两个元素高亮

      //传递数据
      echartDataI: {
        columns: ["支付日期", "期初数量", "期初金额", "期末数量"],
        rows: [],
      },
      highlightedSku: ["访客数", "交易金额", "搜索人数"], // 初始化时，前两个元素高亮

      //Sku传递数据
      echartDataSku: {
        columns: ["支付日期", "访客数", "交易金额", "搜索人数"],
        rows: [],
      },
      //所点击的店铺名称
      keywordList: [],
      //时间
      //
      dayActive: 2,
      timeArr: [
        { value: "2", label: "环比时间" },
        // { value: "7", label: "最近7天" },
        // { value: "30", label: "日" },
        // { value: "56", label: "周" },
        // { value: "365", label: "月" },
        // { value: "1", label: "自定义" },
        // { value: "90", label: "环比时间" },
      ],
      timeGap: { startTime: "", endTime: "" },
      dayActiveTime: 30,
      timeArrTime: [
        // { value: "2", label: "昨天" },
        // { value: "7", label: "最近7天" },
        { value: "30", label: "销售时间段" },
        // { value: "56", label: "周" },
        // { value: "365", label: "月" },
        // { value: "1", label: "自定义" },
        // { value: "90", label: "新品时间" },
      ],
      timeGapTime: { startTime: "", endTime: "" },
      // 店铺
      cascadeList: [],
      //
      value: ["VFU", "天猫", "vfu运动旗舰店"],
      loading: false,
      //店铺名称
      shopName: "",
      pjtUrl: process.env.VUE_APP_BASE_API,
      // 显示搜索条件
      showSearch: true,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        decimalsNumber: 2,
        // productNo: null,
        // manufacturerCode: null,
        // salePrice: null,
        // tagPrice: null,
        firstLevelColumn: null,
        secondLevelColumn: null,
        // logoPosition: null,
        // purchasingReportAttachments: null,
        designFabricNameList: null,
        productSeason: null,
        operationMainProducts: null,
        operationLevel: null,

        // itemType: "商品id",
        // salesGrade: ["VFU",],
        endTime: null,
        startTime: null,
        dateType: null,
        isNewList: null,
        newProStartTime: null,
        newProEndTime: null,
        itemOne: null,
        label: null,
        // isAsc: "desc",
        // property: "visitors",

        firstLevelList: null,
        secondLevelList: null,
        threeLevelList: null,

        dataYear: null,
        dataMonth: null,
        sku: null,
        isPic: true,

        // dictType: undefined,
      },
      ShopNameList: [],
      itemHeight: window.innerHeight - 580,
      height: 400,
      columnsItem: [
        {
          prop: "chainVisitors",
          id: 2,
          label: "环比访客",
          width: 135,
        },
        {
          prop: "visitorsChange",
          id: 3,
          label: "访客变化",
          width: 135,
        },
        {
          prop: "visitorsChain",
          id: 4,
          label: "访客占比",
          width: 135,
        },
        {
          prop: "payConversionRate",
          id: 5,
          label: "支付转化率",
          width: 135,
        },
        {
          prop: "chainPayConversionRate",
          id: 6,
          label: "环比转化率",
          width: 135,
        },
        {
          prop: "payConversionRateChange",
          id: 7,
          label: "支付转化率变化",
          width: 135,
        },

        {
          prop: "chainPayAmount",
          id: 9,
          label: "环比支付金额",
          width: 135,
        },
        {
          prop: "payAmountChange",
          id: 10,
          label: "支付金额变化",
          width: 135,
        },
        {
          prop: "payAmountChain",
          id: 11,
          label: "金额环比%",
          width: 135,
        },
        {
          prop: "addtocartUsers",
          id: 12,
          label: "加购人数",
          width: 135,
        },
        {
          prop: "addPurchasesChange",
          id: 13,
          label: "加购变化",
          width: 135,
        },
        // {
        //   prop: "addPurchasesRate",
        //   id: 14,
        //   label: "加购率",
        //   width: 135,
        // },
        // {
        //   prop: "promotionCost",
        //   id: 15,
        //   label: "推广花费",
        //   width: 135,
        // },
        // {
        //   prop: "promotionClicks",
        //   id: 16,
        //   label: "推广点击量",
        //   width: 135,
        // },
        {
          prop: "avgCartValue",
          id: 17,
          label: "客单价",
          width: 135,
        },
        {
          prop: "uvValue",
          id: 18,
          label: "UV价值",
          width: 135,
        },
        {
          prop: "successReturnAmount",
          id: 23,
          label: "成功退款金额",
          width: 135,
        },
        {
          prop: "tbUserCommission",
          id: 24,
          label: "淘宝客佣金",
          width: 135,
        },
      ],
      columns: [
        {
          prop: "visitors",
          id: 1,
          label: "访客数",
          width: 135,
        },
        {
          prop: "paymentAmount",
          id: 8,
          label: "支付金额",
          width: 135,
        },
        {
          prop: "oldVisitors",
          id: 19,
          label: "老访客数",
          width: 135,
        },
        {
          prop: "newVisitors",
          id: 20,
          label: "新访客数",
          width: 135,
        },
        {
          prop: "oldPaidCustomers",
          id: 21,
          label: "支付老买家数",
          width: 135,
        },
        {
          prop: "oldCustomerPaidAmount",
          id: 22,
          label: "老买家支付金额",
          width: 135,
        },

        {
          prop: "addtocartItems",
          id: 25,
          label: "加购件数",
          width: 135,
        },
        {
          prop: "paidCustomers",
          id: 26,
          label: "支付买家数",
          width: 135,
        },
        {
          prop: "paidSuborders",
          id: 27,
          label: "支付子订单数",
          width: 135,
        },
        {
          prop: "payNumber",
          id: 28,
          label: "支付件数",
          width: 135,
        },
        {
          prop: "productCollectionBuyers",
          id: 29,
          label: "商品收藏买家数",
          width: 135,
        },
        {
          prop: "productCollectionCount",
          id: 30,
          label: "商品收藏次数",
          width: 135,
        },
        {
          prop: "paidProducts",
          id: 31,
          label: "支付商品数",
          width: 135,
        },
      ],
      //品类属性
      itemType: [
        { value: "visitors", label: "访客数" },
        { value: "searchCount", label: "搜索人数" },
        { value: "collectionCount", label: "收藏人数" },
        { value: "addPurchasesPeoNum", label: "加购人数" },
        { value: "payConversionRate", label: "支付转化率" },
        { value: "paidBuyerCount", label: "支付买家数" },
        { value: "uvValue", label: "UV价值" },
        { value: "customerPrice", label: "客单价" },
        { value: "searchShare", label: "搜索占比" },
        { value: "collectionRate", label: "收藏率" },
        { value: "addPurchasesRate", label: "加购率" },
        { value: "collectionCartRate", label: "收藏加购率" },
        { value: "reservedDepositAmount", label: "预售定金金额" },
        { value: "reservedDepositItemNum", label: "预售定金商品件数" },
      ],
    };
  },
  // watch: {
  //   value: {
  //     handler: function (newnew, oldold) {
  //       console.log(JSON.stringify(newnew));

  //       // this.formData = {
  //       //   libraryIdList: [{ id: "" }],
  //       // };
  //       //  this.chinaConfigure();
  //       // this.chinaConfigure();
  //       // this.$nextTick(() => {
  //       //   this.$refs.platform.echarts.resize();
  //       // });
  //     },
  //     deep: true,
  //     immediate: true,
  //   },
  // },
  created() {
    // var timeGap = JSON.parse(localStorage.getItem("objGap"));
    // if (timeGap) {
    //   console.log(JSON.stringify(timeGap));
    //   //   Object.assign(this.$data.valueTime, new Date(timeGap.valueTime));
    //   //   // this.groupType = timeGap.dateType;
    //   // this.$set(this.valueTime, timeGap.valueTime);
    //   this.valueTime = new Date(timeGap.startTime);
    //   //   this.$forceUpdate;
    //   //   // val = new Date(timeGap.startTime);
    //   //   // this.$emit("input", val);
    //   //   // this.timeObj.startTime = new Date(timeGap.startTime),
    //   //   //   this.timeObj.endTime = new Date(timeGap.endTime),
    // }
    // var storeForm = JSON.parse(localStorage.getItem("skuadminParams"));
    // if (storeForm) {
    //   // this.$set(this.queryParams, storeForm)
    //   this.queryParams = storeForm;
    //   this.getselectItemDateList(this.queryParams);
    // }
    // // var otherVal = JSON.parse(localStorage.getItem("skuadmin"));
    // // if (otherVal) {
    // //   this.$set(this.queryParams, "pageNum", otherVal.currentPage);
    // //   this.$set(this.queryParams, "pageSize", otherVal.pageSize);

    // //   // this.Nowscroll = otherVal.scrollTop
    // //   // this.scrollLeft = otherVal.scrollLeft
    // // }
    // this.getselectKeyWordList();
    //默认显示上月日期
    let date = new Date(new Date() - 30 * 24 * 3600 * 1000);

    this.value2 = moment(date).format("YYYY-MM");
    this.changeTime();
    //   date.getFullYear() +
    //   (date.getMonth() + 1 < 10 ? "0" : "") +
    //   (date.getMonth() + 1);
    // console.log(this.value2); //202212
    //面料名称
    // this.getmianliao();
    // this.handleChangeTime()
    this.getselectShopNameAll();
    /** 查询品牌渠道店铺关系列表 */
    this.getdataSourceList();
    // this.openLoading();
  },

  // mounted() {
  //   // //这里增加一个nextTick，防止图表初始化异常
  //   // this.$nextTick(() => {
  //   //   this.selectKeyWordStatisticsEchartsII();
  //   // });

  //   var _this = this;
  //   this.resizeTable();
  //   window.onresize = function () {
  //     _this.resizeTable();
  //   };
  //   window.addEventListener("scroll", this.startScrollTimer);
  // },
  // beforeDestroy() {
  //   window.removeEventListener("scroll", this.startScrollTimer);
  // },
  // //记得清空  如果在keepalive中 则使用activated  deactivated
  // destroyed() {
  //   window.onresize = null;
  // },
  methods: {
    getselectSkuLikeList(key) {
      selectSkuLike({ value: key }).then((response) => {
        this.selectSkuLikeList = response;
      });
    },
    /** 导出按钮操作 */
    handleExportPic() {
      this.download(
        "/financial/BiPurchaseSaleStock/exportPurchaseSaleStock",
        {
          ...this.queryParams,
          isPic: true,
        },
        `财务分析_${new Date().getTime()}.xlsx`
      );
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "/financial/BiPurchaseSaleStock/exportPurchaseSaleStock",
        {
          ...this.queryParams,
          isPic: false,
        },
        `财务分析_${new Date().getTime()}.xlsx`
      );
    },
    ///主时间
    changeTime() {
      this.value2 = moment(this.value2).format("YYYY-MM");
      console.log(JSON.stringify(this.value2));
      this.queryParams.dataYear = this.value2.split("-")[0];
      this.queryParams.dataMonth = this.value2.split("-")[1];
      //提示
      this.isCalculateDataDwd();
    },
    handleSetChartData() {
      console.log(11111);
      this.queryParams.sku = "汇总";
      this.selectKeyWordStatisticsEchartsI();
      this.itemData = this.valueData ? this.valueData : {};
    },
    //更新按钮
    handleUpdate() {
      this.openLoading();
      calculateData(this.queryParams).then((response) => {
        this.$modal.closeLoading();
        if ((response.code = 200)) {
          this.$modal.msgSuccess("当前月已更新");
          //总览
          this.getselectPurchaseSaleStockAll();
          //列表
          this.getList();
        }
      });
    },
    // 打开加载层
    // openLoading() {
    //   this.$modal.loading("正在加载，请稍候！");
    // },
    //提示
    isCalculateDataDwd() {
      this.openLoading();
      isCalculateData().then((response) => {
        this.$modal.closeLoading();
        if (response == false) {
          this.$modal.msgError("当前月未更新");
        }
        //总览
        this.getselectPurchaseSaleStockAll();
        //列表
        this.getList();
      });
    },
    getselectPurchaseSaleStockAll() {
      selectPurchaseSaleStockAll(this.queryParams).then((response) => {
        this.valueData = response ? response : {};
        console.log(JSON.stringify(this.valueData));
      });
    },

    getselectShopNameAll() {
      selectCompeteShopNameAll().then((response) => {
        this.ShopNameList = response;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();

      // this.handleChange();
    },
    /** 重置按钮操作 */
    resetQuery() {
      // this.queryParams = {};

      this.resetForm("queryForm");
      this.BiKeywordDwdList = [];
      this.handleQuery();
    },
    // 收起展开时触发
    toggleTreeExpand(row, treeExpanded, event) {
      console.log(row, treeExpanded, event);
    },
    //匹配店铺名称
    getselectKeyWordList(key) {
      selectKeyWordList({ inputValue: key }).then((response) => {
        this.libraryOptions = response.sort((a, b) => a.length - b.length);
      });
    },
    //添加库存名称
    addLibraryIdList() {
      if (this.formData.libraryIdList.length > 4) {
        this.$modal.msgError("请选择不超过5个店铺名称");
        return;
      }
      if (this.formData.libraryIdList.length > 0) {
        let hasValue = false;
        for (let i = 0; i < this.formData.libraryIdList.length; i++) {
          if (!this.formData.libraryIdList[i].id) {
            hasValue = true;
            break;
          }
        }
        if (hasValue) {
          return this.$message.warning("请先选择未选择项");
        }
        this.formData.libraryIdList.push({ id: "" });
      }
    },
    //库存名称删除
    delRow(item, index) {
      if (this.formData.libraryIdList.length > 1) {
        this.formData.libraryIdList.splice(index, 1);
        // this.$forceUpdate;
        const E = echarts.init(this.$refs.echarts);
        E.dispose();
      } else {
        this.$message.warning("至少选择一项");
      }
    },

    handleSortChange(column) {
      /**
  排序方向 asc 升序 desc 降序
 
private String orderDirection;*/
      switch (column.order) {
        case "ascending":
          this.queryParams.isAsc = "asc";
          break;
        case "descending":
          this.queryParams.isAsc = "desc";
          break;
        default:
          this.queryParams.isAsc = null;
          break;
      }
      this.queryParams.property = column.prop; //查询字段是表格中字段名字
      // this.queryParams.orderDirection = column.order;//动态取值排序顺序

      this.getList();
    },
    //表头
    renderheader(h, { column, $index }) {
      return h("div", {}, [
        h("div", {}, column.label.split("\n")[0]),
        h("div", {}, column.label.split("\n")[1]),
      ]);
    },

    //锚点
    scrollToSection(index) {
      const target = this.sections[index];
      // console.log(JSON.stringify(index));
      //     return
      this.active = index;
      if (target) {
        this.$nextTick(() => {
          target.scrollIntoView({ behavior: "smooth" });
          this.activeSection = target;
        });
      }
    },
    //锚点
    startScrollTimer() {
      this.scrollTimer = setInterval(() => {
        const currentSection = document.querySelector("section[data-active]");
        if (currentSection !== this.activeSection) {
          this.activeSection = currentSection;
        } else {
          clearInterval(this.scrollTimer);
        }
      }, 100); // 每100毫秒检查一次滚动位置是否变化
    },
    //锚点高亮
    isActiveSection(sectionId) {
      // 检查当前导航项是否处于高亮状态
      return this.active === sectionId;
    },

    //新老品时间控件
    changDay(val) {
      this.dayActive = val;
      this.timeGap.startTime = val[0];
      this.timeGap.endTime = val[1];
    },
    getDateArr(value) {
      this.timeGap.startTime = value[0];
      this.timeGap.endTime = value[1];
      console.log(JSON.stringify(this.dayActive));
      console.log(JSON.stringify(this.timeGap));
      // if (this.groupType == "daterange") {
      this.queryParams.chainStartDate = this.timeGap.startTime;
      this.queryParams.chainEndDate = this.timeGap.endTime;
      if (!this.queryParams.endTime) {
        return;
      } else {
        //一级
        this.getPartWordList();
      }
      // }
    },
    //销售时间段
    changDayTime(val) {
      this.dayActiveTime = val;
      this.timeGapTime.startTime = val[0];
      this.timeGapTime.endTime = val[1];
    },
    getDateArrTime(value) {
      this.timeGapTime.startTime = value[0];
      this.timeGapTime.endTime = value[1];
      // console.log(JSON.stringify(this.dayActive));
      // console.log(JSON.stringify(this.timeGap));

      this.queryParams.newProStartTime = this.timeGapTime.startTime;
      this.queryParams.newProEndTime = this.timeGapTime.endTime;
      // this.handleChange();
      this.getList();
    },
    //店铺控件
    handleChange(val) {
      console.log(JSON.stringify(val));

      // var lastElement = val.pop();
      // this.shopName = lastElement

      // console.log(this.dayActive);
      // let obj = {
      //   salesGrade: this.value.join(","),
      //   ...this.timeObj,
      //   item: this.productView,
      //   ...this.queryParams,
      // };
      // console.log(JSON.stringify(obj));
      // var skuadminParams = JSON.parse(localStorage.getItem("skuadminParams"));
      // if (skuadminParams) {
      //   this.getselectItemDateList(skuadminParams);
      //   localStorage.setItem("skuadminParams", JSON.stringify(skuadminParams));
      // } else {
      // (this.queryParams.salesGrade = this.value.join(",")),
      this.itemData = {};
      this.productNo = "";
      this.queryParams.startTime = this.timeObj.startTime;
      this.queryParams.endTime = this.timeObj.endTime;
      this.queryParams.dateType = this.timeObj.dateType;
      // this.queryParams.item = this.productView;
      if (!this.queryParams.endTime) {
        return;
      } else {
        //一级
        // this.getPartWordList();
        //二级
        this.getList();
        if (!this.queryParams.inputValue) {
          return;
        } else {
          this.selectKeyWordStatisticsEchartsI();
          if (!this.formData.libraryIdList[0].id) {
            return;
          } else {
            this.selectKeyWordStatisticsEchartsII();
          }
        }
      }
      // }
      let param = {
        dataSource: this.value,
        startTime: this.dateFormat(this.timeObj.startTime),
        endTime: this.dateFormat(this.timeObj.endTime),
        dataType: this.groupType,
      };
      console.log(JSON.stringify(param));
      if (!param.endTime) {
        return;
      } else {
        // this.getechartChannelData(obj)
        // this.getnumberOfItem(param);
        // this.getTopSal(param);
      }
    },

    //选完时间后发请求
    handleChangeTime(timeObj) {
      // console.log(type)
      // console.log(timeObj)
      // TODO
      this.timeObj = timeObj;
      console.log(JSON.stringify(this.timeObj));
      // let obj = {
      //   salesGrade: this.value.join(","),
      //   ...timeObj,
      //   item: this.productView,
      //   ...this.queryParams,
      // };
      // var skuadminParams = JSON.parse(localStorage.getItem("skuadminParams"));
      // if (skuadminParams) {
      //   this.getselectItemDateList(skuadminParams);
      //   localStorage.setItem("skuadminParams", JSON.stringify(skuadminParams));
      // } else {
      // if (!this.queryParams.itemType) {
      //   this.$modal.msgError("请选择产品视角");
      //   return;
      // }
      this.queryParams.pageNum = 1;
      // (this.queryParams.salesGrade = this.value.join(",")),
      this.queryParams.startTime = this.timeObj.startTime;
      this.queryParams.endTime = this.timeObj.endTime;
      this.queryParams.dateType = this.timeObj.dateType;
      // this.queryParams.item = this.productView;
      if (!this.queryParams.endTime) {
        return;
      } else {
        //一级
        // this.getPartWordList();
        this.getList();
        if (!this.queryParams.inputValue) {
          return;
        } else {
          this.selectKeyWordStatisticsEchartsI();
          return;
          if (!this.formData.libraryIdList[0].id) {
            return;
          } else {
            this.selectKeyWordStatisticsEchartsII();
          }
        }
      }

      let param = {
        dataSource: this.value,
        startTime: this.dateFormat(timeObj.startTime),
        endTime: this.dateFormat(timeObj.endTime),
        dataType: this.groupType,
      };
      console.log(JSON.stringify(param));
      if (!param.endTime) {
        return;
      } else {
        // this.getechartChannelData(obj)
        //客件数
        // this.getnumberOfItem(param);
        // //地区Top20
        // this.getTopSal(param);
      }
    },
    productEdit(row, column, cell, event) {
      // this.queryParams.inputValue = row.rootNode;
      // if (row.firstLevelColumn != null && row.secondLevelColumn != null) {
      //   console.log(3);
      //   this.queryParams.threeLevelList = row.threeLevelColumn;
      // } else
      if (
        row.firstLevelColumn != null &&
        row.secondLevelColumn != null &&
        row.threeLevelColumn == null
      ) {
        console.log(2);
        this.queryParams.threeLevelList = null;
        this.queryParams.secondLevelList = row.rootNode;
      } else if (
        row.secondLevelColumn == null &&
        row.threeLevelColumn == null
      ) {
        console.log(1);
        this.queryParams.secondLevelList = null;
        this.queryParams.threeLevelList = null;
        this.queryParams.firstLevelList = row.rootNode;
      } else {
        console.log(3);
        this.queryParams.threeLevelList = row.rootNode;
      }

      delete this.queryParams.inputList;
      this.getList();
    },
    tableEdit(row, column, cell, event) {
      console.log(event);
      this.itemData = row;
      this.queryParams.sku = row.sku;
      this.selectKeyWordStatisticsEchartsI();
      return;
      // if (row.sourceName) {
      //   this.productNo = row.sourceName;
      //   // this.queryParams.keyWordGrade = "二级关键字";
      // } else {
      //   this.productNo = row.label;
      //   this.queryParams.label = row.label;
      //   // this.queryParams.keyWordGrade = "一级关键字";
      //   // delete this.queryParams.property;
      //   //二级
      //   this.getList();
      // }
      // let lable = "";

      // if (this.queryParams.itemType == "商品id") {
      //   lable = row.productId;
      // } else if (this.queryParams.itemType == "item") {
      //   lable = row.item;
      // } else if (this.queryParams.itemType == "spu") {
      //   lable = row.productNo;
      // }
      // this.productNo = lable;
      // console.log(lable);

      if (event.ctrlKey) {
        //如果ctr1按下就让他按下的标识符变为true
        var m = [];
        this.formData.libraryIdList.forEach((item) => {
          if (item.id == "") {
            this.formData.libraryIdList.splice(0, 1);
          }
          m.push(item.id);
        });
        if (this.formData.libraryIdList.length > 4) {
          this.$modal.msgError("请选择不超过5个店铺名称");
          return;
        }
        let filteredArray = m.filter(function (item) {
          // if (row.sourceName) {
          //   return item == row.sourceName;
          // } else {
          //   return item == row.label;
          // }
          return item == row.shopName;
        });

        if (filteredArray.length > 0) {
          this.$modal.msgError("你选择的店铺名称重复，请重新选择");
          return;
        } else {
          this.formData.libraryIdList.push({ id: row.shopName });
        }
      }
      this.selectKeyWordStatisticsEchartsII();
    },
    changeView() {
      this.getList();
      this.formData.libraryIdList = [{ id: "" }];
      const E = echarts.init(this.$refs.echarts);
      E.dispose();
    },
    pageList() {
      delete this.queryParams.sku;
      this.openLoading();
      selectPurchaseSaleStockRank(this.queryParams).then((response) => {
        this.$modal.closeLoading();

        this.BiKeywordDwdList = response.rows ? response.rows : [];

        this.total = response.total;
      });
    },
    // 二级
    getList() {
      if (this.queryParams.sku == "汇总") {
        delete this.queryParams.sku;
      }
      delete this.queryParams.inputValue;
      // this.loading = true;
      this.openLoading();
      selectPurchaseSaleStockRank(this.queryParams).then((response) => {
        this.$modal.closeLoading();

        this.BiKeywordDwdList = response.rows ? response.rows : [];

        this.total = response.total;
        // var l = [];
        // if (response.rows.length > 0) {
        //   this.itemData = response.rows[0];
        //   this.queryParams.inputValue = response.rows[0].shopName;
        //   this.selectKeyWordStatisticsEchartsI();
        // }
        // console.log(JSON.stringify(l));
        // this.BiKeywordDwdList = l;
        // this.loading = false;
      });
    },

    // 一级
    getPartWordList() {
      // this.loading = true;

      selectGradeList(this.queryParams).then((response) => {
        console.log(JSON.stringify(response));
        this.PartWordList = response ? response : [];

        // if (response.length > 0) {
        //   this.queryParams.label = response[2].label;
        //   this.queryParams.isAsc = "desc";
        //   this.queryParams.property = "visitors";
        //   this.getList();
        // } else {
        //   this.BiKeywordDwdList = [];
        // }
      });
    },

    keywordListlength(type) {
      // this.selectKeyWordStatisticsEchartsII();
      console.log(JSON.stringify(type));
      console.log(JSON.stringify(this.formData.libraryIdList));
      var m = [];
      this.formData.libraryIdList.forEach((item) => {
        m.push(item.id);
        // if (item.id == type) {
        //   this.$modal.msgError("你输入的店铺名称重复，请重新输入");
        // }
      });
      let filteredArray = m.filter(function (item) {
        return item === type;
      });

      if (filteredArray.length > 1) {
        this.$modal.msgError("你输入的店铺名称重复，请重新输入");
      }
    },
    //曲线分析
    selectKeyWordStatisticsEchartsII() {
      delete this.queryParams.inputValue;
      if (!this.formData.libraryIdList[0].id) {
        // console.log(555555);
        // this.$modal.msgError("请选择店铺名称");
        return;
      }
      // console.log(JSON.stringify(this.formData.libraryIdList));
      const input = [];
      this.formData.libraryIdList.forEach((item) => {
        input.push(item.id);
      });
      this.queryParams.inputList = input.join();
      // if (
      //   this.queryParams.inputValue.includes("品牌词") ||
      //   this.queryParams.inputValue.includes("品类词") ||
      //   this.queryParams.inputValue.includes("汇总")
      // ) {
      //   this.queryParams.keyWordGrade = "一级关键字";
      // } else {
      //   this.queryParams.keyWordGrade = "二级关键字";
      // }

      // this.formData.libraryIdList.map((item) => item.id).join();
      // console.log(JSON.stringify(input));
      // this.queryParams.inputValue = input;
      // console.log(JSON.stringify(this.queryParams));
      // return;
      // this.queryParams.inputValue = "vfu官方旗舰店,1.vfu运动,af 319585";
      comparisonStatisticsPro(this.queryParams).then((response) => {
        console.log(JSON.stringify(response));

        let order = { date: [], data: [] };
        order.date = response.map((item) => item.dataDateUnit);
        response.forEach((item) => {
          order.data.push(item.keywordProperty);
        });
        const xData = order.date;
        const keyArray = Object.keys(order.data[0]);
        const series = [];
        keyArray.forEach((key) => {
          series.push({
            name: key,
            data: order.data.map((item) => item[key]),
            type: "line",
          });
        });

        // let tooltip = {};
        // if (this.queryParams.property == "payConversionRate") {
        //   tooltip = {
        //     trigger: "axis",
        //     formatter: "{c}%",
        //   };
        // } else {
        //   tooltip = {
        //     trigger: "axis",
        //   };
        // }

        const option = {
          grid: {
            left: "5%",
            top: "10%",
            right: "3%",
            bottom: "10%",
          },
          // 提示框
          tooltip: { trigger: "axis" },
          xAxis: {
            data: xData,
          },
          yAxis: {},
          legend: {
            data: keyArray,
          },
          series,
        };

        const optionEcharts = {
          grid: {
            left: "5%",
            top: "10%",
            right: "3%",
            bottom: "10%",
          },
          // 提示框
          tooltip: {
            trigger: "item",
            formatter: "{c}%",
          },
          xAxis: {
            data: xData,
          },
          yAxis: {
            axisLabel: { formatter: "{value}%" },
          },
          legend: {
            data: keyArray,
          },
          series,
        };
        // this.echartData.order.xData = xData;
        // this.echartData.order.series = series;
        const E = echarts.init(this.$refs.echarts);

        E.setOption(option);
        // E.dispose();
        // E.resize();
        // if (
        //   // this.queryParams.property == "payConversionRate" ||
        //   this.queryParams.property == "orderConversionRate"
        // ) {
        //   E.setOption(optionEcharts);
        // } else {
        //   E.setOption(option);
        // }
      });
    },
    //曲线分析
    selectKeyWordStatisticsEchartsI() {
      selectMonthlyCostStatistics(this.queryParams).then((response) => {
        // if (response.length <= 0) {
        //   return;
        // }
        var row = [];
        response.forEach((item) => {
          row.push({
            支付日期: item.month,
            期初数量: item.beginningQuantity,
            期初金额: item.beginningAmount,
            期末数量: item.endingQuantity,
            采购退货: item.purchaseReturnQuantity,
            采购进仓: item.purchaseInWarehouseQuantity,
            其它进仓: item.otherInWarehouseQuantity,
            其它退货: item.otherReturnQuantity,
            销售出仓: item.salesOutWarehouseQuantity,
            盘点: item.inventoryCount,
            加工出仓: item.processingOutWarehouseQuantity,
            调拨出: item.transferOutQuantity,
            销售退货: item.salesReturnQuantity,
            调拨入: item.transferInQuantity,
            其他出库: item.otherOutWarehouseAmount,
            本期成本: item.currentPeriodCost,
            // 预售定金金额: item.reservedDepositAmount,
            // 预售定金商品件数: item.reservedDepositItemNum,
            // 推广点击量: item.promotionClicks,
            // 支付件数: item.payProNum,
            // 支付买家数: item.paidCustomers,
            // 支付新买家数: item.payNewBuyers,
            // 支付老买家数: item.oldPaidCustomers,
            // 老买家支付金额: item.oldCustomerPaidAmount,
            // 成功退款金额: item.successReturnAmount,
            // 客单价: item.avgCartValue,
            // UV价值: item.uvValue,
            // 老访客数: item.oldVisitors,
            // 新访客数: item.newVisitors,
            // 淘宝客佣金: item.tbUserCommission,
            // 描述相符评分: item.productDetailMatchScore,
            // 物流服务评分: item.logisticsServiceScore,
            // 支付商品数: item.paidProducts,
            // 加购件数: item.addtocartItems,
            // 支付子订单数: item.paidSuborders,
            // 支付件数: item.payNumber,
            // 商品收藏次数: item.productCollectionCount,
            // 商品收藏买家数: item.productCollectionBuyers,
          });
        });
        // console.log(JSON.stringify(row));

        this.echartDataI.rows = row;
      });
    },
    //多对一指标点击回传
    handleSetLineSkuData(type) {
      console.log(JSON.stringify(type));
      this.queryParams.property = type;
      this.selectKeyWordStatisticsEchartsII();
      return;
      // console.log(JSON.stringify(type));
      if (this.highlightedSku.includes(type)) {
        return;
      }
      // 移除旧的高亮元素
      this.highlightedSku.shift();
      // // 添加新的高亮元素
      this.highlightedSku.push(type);

      console.log(JSON.stringify(this.highlightedSku));
      var arr = ["支付日期"];
      // let temp = arr.concat(this.highlightedSku);
      // // let temp = arr.push(type)
      // console.log(JSON.stringify(temp));
      // this.echartDataSku.columns = temp;
      let array = arr.concat(this.highlightedSku);
      // let temp = arr.push(type)
      // console.log(JSON.stringify(temp));
      // var array = ["支付日期", "退款金额", "净销售额", "毛利率"];
      var rateItem;

      // 遍历数组，找到包含'率'字的元素
      for (var i = 0; i < array.length; i++) {
        if (array[i].includes("率")) {
          rateItem = array[i];
          break;
        }
      }

      // 如果找到了包含'率'字的元素，将其移到数组最后
      if (rateItem) {
        var index = array.indexOf(rateItem);
        if (index !== array.length - 1) {
          array.splice(index, 1);
          array.push(rateItem);
        }
      }

      console.log(array);
      this.echartDataSku.columns = array;
    },
    //一对多指标点击回传
    handleSetLineChartData(type) {
      //
      if (this.highlighted.includes(type)) {
        return;
      }
      // 移除旧的高亮元素
      this.highlighted.shift();
      // // 添加新的高亮元素
      this.highlighted.push(type);

      console.log(JSON.stringify(this.highlighted));
      var arr = ["支付日期"];
      let array = arr.concat(this.highlighted);
      // let temp = arr.push(type)
      // console.log(JSON.stringify(temp));
      // var array = ["支付日期", "退款金额", "净销售额", "毛利率"];
      var rateItem;

      // 遍历数组，找到包含'率'字的元素
      for (var i = 0; i < array.length; i++) {
        if (array[i].includes("率")) {
          rateItem = array[i];
          break;
        }
      }

      // 如果找到了包含'率'字的元素，将其移到数组最后
      if (rateItem) {
        var index = array.indexOf(rateItem);
        if (index !== array.length - 1) {
          array.splice(index, 1);
          array.push(rateItem);
        }
      }

      console.log(array);
      this.echartDataI.columns = array;
    },

    // 时间格式转换
    dateFormat(date) {
      date = new Date(date);
      let Y = date.getFullYear() + "-";
      let M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      let D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate() + "";
      return Y + M + D;
    },
    /** 查询品牌渠道店铺关系列表 */
    getdataSourceList() {
      listAll().then((response) => {
        let result = this.transformData(response);
        this.cascadeList = result;
      });
    },
    //店铺渠道品牌转换

    transformData(data) {
      let result = [];

      data.forEach((item) => {
        let brand = item.brand;
        let channel = item.channel;
        let shopName = item.shopName;

        // 如果brand在结果数组中不存在，则创建一个新的数组
        let brandIndex = result.findIndex(
          (brandObj) => brandObj.label === brand
        );
        if (brandIndex === -1) {
          result.push({
            label: brand,
            value: brand,
            children: [],
          });
          brandIndex = result.length - 1;
        }

        // 如果channel在当前brand的children数组中不存在，则创建一个新的数组
        let channelIndex = result[brandIndex].children.findIndex(
          (channelObj) => channelObj.label === channel
        );
        if (channelIndex === -1) {
          result[brandIndex].children.push({
            label: channel,
            value: channel,
            children: [],
          });
          channelIndex = result[brandIndex].children.length - 1;
        }

        // 如果shopName在当前channel的children数组中不存在，则创建一个新的数组
        let shopIndex = result[brandIndex].children[
          channelIndex
        ].children.findIndex((shopObj) => shopObj.label === shopName);
        if (shopIndex === -1) {
          result[brandIndex].children[channelIndex].children.push({
            label: shopName,
            value: shopName,
            // children: []
          });
        }
      });

      return result;
    },

    // 打开加载层
    openLoading() {
      this.$modal.loading("正在加载数据，请稍候！");
    },
    // // table自动高度
    // returnTableHeight(ref, bottomOffset) {
    //   let height = null;
    //   height =
    //     window.innerHeight - ref.getBoundingClientRect().top - bottomOffset;
    //   return height;
    // },

    // resizeTable() {
    //   this.$nextTick(() => {
    //     this.tableHeight = this.returnTableHeight(this.$refs.tableDom, 100);
    //   }, 0);
    // },
    /** 导出按钮操作 */
    // handleExport() {
    //   return;
    //   if (this.ItemDateList.length <= 0) {
    //     this.$modal.msgError("暂无数据可导出");

    //     return;
    //   }
    //   this.download(
    //     "product/BiAnalysis/export",
    //     {
    //       ...this.queryParams,
    //     },
    //     `商品排行_${new Date().getTime()}.xlsx`
    //   );
    // },
  },
};
</script>

<style lang="scss" scoped>
i.el-icon-top::before {
  color: #ff0000;
  /* 这将把颜色改为红色 */
}
i.el-icon-caret-top::before {
  color: #ff0000;
  /* 这将把颜色改为红色 */
}
i.el-icon-bottom::before {
  color: green;
  /* 这将把颜色改色 */
}
i.el-icon-caret-bottom::before {
  color: green;
  /* 这将把颜色改色 */
}

.el-dialog-div {
  height: 80vh;
  overflow-x: hidden;
}
span.textname {
  display: -webkit-box;

  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  white-space: pre-wrap;
}

.el-input.is-disabled ::v-deep .el-input__inner {
  color: #606266;
  background-color: white;
  border: none;
}
.el-textarea.is-disabled ::v-deep .el-textarea__inner {
  color: #606266;
  background-color: white;
  border: none;
  width: 500px;
  resize: none;
  cursor: pointer;
}
/* 移除默认的列表样式 */
ul {
  margin-top: 0.4%;
  list-style-type: none;
  /* 设置弹性布局，使列表项横向排列 */
  display: flex;
  /* 添加一些内边距和背景颜色 */
  // padding: 10px;
  margin-right: 10px;
  /* 设置边框和圆角 */
  // border: 1px solid #ddd;
  border-radius: 5px;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

/* 设置列表项样式 */
li {
  /* 添加一些内边距和右边距 */
  // padding: 10px;
  margin-right: 10px;
  /* 设置链接文本样式 */
  font-size: 15px;
  color: #bbb;
  text-decoration: none;
}

li.active a {
  // color: #f00;
  /* 高亮颜色 */
  color: #fff;
  background-color: #40c9c6;
}

// section {
//   margin-top: 60px;
// }

.dashboard-editor-container {
  padding: 16px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
<style>
.el-scrollbar__wrap {
  /* overflow-x: hidden; */
  /* overflow-y: hidden; */
}
</style>
/** 访客百分比 *
private Double visitorRate:
/** 环比访客 */
private Integer chainVisitors:
/** 访客变化 */
private Integer visitorChange:
/** 访客环比 */
private Double visitorChain :
---支付金额模块
/** 支付金额 */
@Excel(name = "支付金额”)
private Double payAmount
/** 金额百分比 */
private Double payAmountRate;
/** 环比金额 */
private Double chainPayAmount:
/** 金额变化 */
private Double payAmountchange:
/** 金额环比 */
private Double payAmountchain:
--转化率模块-----
/** 支付转化率 */
@Excel(name ="支付转化率”)
private Double payConversionRate:
/** 环比转化率 */
private Double chainPayConversionRate:
/** 转化率环比 */
private Double payConversionRateChain;
￥米
川鸡爸
private Double addPurchaseRate:/** 环比加购 *
private Double chainAddPurchase :/** 加购变化 */
private Double addPurchasechange:
/** 店铺名称 */
@Excel(name = "店铺名称")
private String shopName;

/** 店铺ID */
@Excel(name = "店铺ID")
private String shopId;

/** 日期 */
@JsonFormat(pattern = "yyyy-MM-dd")
@Excel(name = "日期", width = 30, dateFormat = "yyyy-MM-dd")
private Date dataDate;

/** 地址 */
@Excel(name = "地址")
private String address;

/** 省 */
@Excel(name = "省")
private String province;

/** 市 */
@Excel(name = "市")
private String city;

/** 交易金额 */
@Excel(name = "交易金额")
private Double payAmount;
//private Double transactionAmount;

/** 访客数 */
@Excel(name = "访客数")
private Integer visitors;
//private Integer visitorCount;

/** 搜索人数 */
@Excel(name = "搜索人数")
private Integer searchCount;

/** 收藏人数 */
@Excel(name = "收藏人数")
private Integer collectionCount;

/** 加购人数 */
@Excel(name = "加购人数")
private Integer addPurchasesPeoNum;
//private Integer cartCount;

/** 支付转化率 */
@Excel(name = "支付转化率")
private Double payConversionRate;
//private Double conversionRate;
/** 支付转化率环比 */
private Double payConversionRateChain;

/** 支付买家数 */
@Excel(name = "支付买家数")
private Integer paidBuyerCount;

/** UV价值 */
@Excel(name = "UV价值")
private Double uvValue;

/** 客单价 */
@Excel(name = "客单价")
private Double customerPrice;

/** 搜索占比 */
@Excel(name = "搜索占比")
private Double searchShare;

/** 收藏率 */
@Excel(name = "收藏率")
private Double collectionRate;

/** 加购率 */
@Excel(name = "加购率")
private Double addPurchasesRate;

/** 收藏加购率 */
@Excel(name = "收藏加购率")
private Double collectionCartRate;

/** 上新商品数 */
@Excel(name = "上新商品数")
private Integer newProductCount;

/** 预售定金金额 */
@Excel(name = "预售定金金额")
private Double reservedDepositAmount;

/** 预售定金商品件数 */
@Excel(name = "预售定金商品件数")
private Integer reservedDepositItemNum;

/** 年 */
@Excel(name = "年")
private Integer dataYear;

/** 月 */
@Excel(name = "月")
private Integer dataMonth;

/** 周 */
@Excel(name = "周")
private Integer dataWeek;